<template>
  <div>
  <div class="over-flow">

    <div class="top-right-right">
      <div class="progress-title">{{title}}</div>
      <el-form :model="ruleForm2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="pass">
              <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="checkPass">
              <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm2')">确定</el-button>
          </el-form-item>
      </el-form>
    </div>
    <div class="banner-welfare">
      <img src="//www.cardbaobao.com/images/cbblogos.png">
    </div>
  </div>
  </div>

</template>
<script>
  import infoBanner from 'components/info-banner'
  import creditProduct from "components/credit-product"
  import noticeList from "components/notice-list"
  import { searchList } from '@/common/js/search/searchList'
  export default {
    data() {
      return {
        ruleForm2: {},
        title: 'chaxun ',
        titleType: null,
        titleTypeUrl: null
      }
    },
    components: {
      infoBanner,
      creditProduct,
      noticeList
    },
    mounted() {
      if(this.$router.query == undefined){
        this.titleType = 0
      } else {
        this.titleType = this.$router.query.type
      }
      this.initData()
    },
    watch: {
      '$route'(to, from) {
        this.titleType = to.query.type
        this.initData();
      }

    },
    methods: {
      // 初始化页面title和跳转URL
      initData() {
        this.title = searchList[this.titleType].title
        this.titleTypeUrl = searchList[this.titleType].serchUrl
      }
    }

  }
</script>
<style scoped lang="less">

@import "../../common/less/variable.less";

.banner-welfare {
  width: 54%;
  float: left;
  img {
    width: 100%;
    height: 100%;
  }
}
.top-right-right {
  float: left;
  width: 40%;
  border: 1px solid #DCDCDC;
  border-radius: 31px;
  box-shadow: 6px 0px 6px #888888;
  margin-right: 5%;
  .progress-title {
    width: 100%;
    text-align: center;
    font-size: 36px;
    margin: 40px 0;
  }
  .demo-ruleForm {
    margin-right: 45px;
  }
}
.over-flow {
  overflow: hidden;
  margin-bottom: 200px;
}
.qqqq {
  margin-top: 30px;
  margin-bottom: 30px;
  .content-title {
      width: 100%;
      height: 40px;
      background: #DCDCDC;
  }
}

.credit-list-com {
    >div {
        &:first-child {
            width: 70%;
            margin-right: 10px;
            >.www {
                width: 100%;
                flex-wrap: wrap;
                flex-wrap: wrap;
                // justify-content: center;
                align-items: center;
                margin-left: 8%;
            }
            .card-height {
                padding-bottom: 5px;
            }
        }

        &:last-child {
            width: 30%;
        }
    }
    .left-contain {
        border: 1px solid #DCDCDC;
    }
    .height80 {
        height: 85%;
    }
    .card-div {
        padding-right: 6%;
        &:last-child {
            padding-right: 0;
        }
    }
}

.banner {
    .width45 {
        width: 45% !important;
    }
    .width55 {
        width: 55% !important;
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
}

.top-right {
    .top-right-left {
      >div {
        >div{
          >img {
              width: 50px;
              height: 50px;
          }

        }
      }

    }
}

</style>
